<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <van-button type="info" block @click="searchPlan">历史查询</van-button>
      <div
        class="m-cost"
        style="color: gray;"
      >
        <van-row style="margin-bottom: 2px;line-height: 30px;">
          <van-col span="6">职务</van-col>
          <van-col span="6">员工</van-col>
          <van-col span="6">分数</van-col>
          <van-col span="6">月份</van-col>
        </van-row>
      </div>
      <div
        v-for="item in list"
        :key="item.id"
        class="m-cost"
        @click="edit"
      >
        <div style="text-align: left; font-size: small;color: rgb(156, 156, 156);padding-left: 20px;">{{ item.salon }}</div>
        <van-row style="line-height: 30px;">
          <van-col span="6"> {{ item.duties }}</van-col>
          <van-col span="6"> {{ item.name }}</van-col>
          <van-col span="6"> {{ item.score }}</van-col>
          <van-col span="6"> {{ item.cdate }}</van-col>
        </van-row>
        <div style="text-align: left; font-size: small;color: rgb(156, 156, 156);padding-left: 20px; margin-bottom: 6px;">原因：{{ item.note }}</div>
      </div>
    </van-list>
    <van-popup
      v-model="show"
      closeable
      :style="{ height: '40%', width: '96%' }"
    >
      <div style="text-align: center;">
        <p style="font-size: 20px;">前台：赵前台</p>
        <van-cell-group style="margin: 0 30px;">
          <van-field v-model="score" label="得分" type="number" placeholder="请输入分数" />
        </van-cell-group>
        <van-cell-group style="margin: 10px;">
          <van-field v-model="value" rows="2" autosize type="textarea" placeholder="请输入原因" />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import Field from 'vant/lib/field'
import 'vant/lib/field/style'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell-group/style'
// import { mapGetters } from 'vuex'
// import { getShopClerks } from '@/api/txs'

export default {
  components: {
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
    [Field.name]: Field
  },
  data () {
    return {
      score: 99,
      value: '',
      show: false,
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    // ...mapGetters(['openId'])
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
    onLoad () {
      this.loading = false
      // getShopClerks(this.openId).then(res => {
      //   this.list = res.data.data
      // })
      this.list = [
        { cdate: '2024/01', name: '赵院长', duties: '院长', score: '91.3', salon: '1号美容院', note: '管理不当' },
        { cdate: '2024/01', name: '张管家', duties: '管家', score: '77', salon: '1号美容院', note: '计划未完成' },
        { cdate: '2024/01', name: '李前台', duties: '前台', score: '88', salon: '1号美容院', note: '迟到早退' }
      ]
      this.finished = true
    },
    onConfirm () {},
    searchPlan() {},
    setPlan() {},
    edit() {
      this.show = true
    }
  }
}
</script>
<style lang="scss" scoped>
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  // line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 1px rgb(201, 201, 201);
  // margin-bottom: 3px;
  .m-cost-cell{
    display: flex;
    // justify-content: center;
    // width: 100%;
    // padding: 0 50px 0 50px;
  }
}
.m-total {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  // color:#C31171;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 3px;
  padding: 0 20px;
}
</style>
